<template>
	<view class="recommend">
		<view class="recommend-item" v-for="(item,index) in recommendDataList" :key='index'>
			<image class="item-big" :src="item.bigUrl" mode=""></image>
			<view class="item-small">
					<block v-for="(i,k) in item.data" :key="k">
						<image class="item-small" :src="i.imgUrl" mode=""></image>
					</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			recommendDataList:Array
		}
	}
</script>

<style scoped lang="scss">
	.recommend{
		padding: 20rpx;
		background-color: #42B7FB;
		.recommend-item{
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			border:2rpx solid #CCCCCC;
			overflow: hidden;
			margin: 20rpx 0;
		}
		.item-big{
			width: 100%;
			height: 280rpx;
		}
		.item-small{
			display: flex;
			height: 240rpx;
			image{
				height: 240rpx;
			}
		}
	}
	
</style>
